<template>
  <div>
    <svg-icon icon-class="scancode" @click="toScan" center/>
    <el-dialog v-if="openScan" title="扫码查订单" v-model="openScan" width="400px"
               @opened="handleScanDialogOpen" append-to-body>
      <el-form :model="form" :rules="rules">
        <el-form-item label="请扫码：" prop="code">
          <el-input v-show="false"/>
          <el-input ref="codeInputRef" v-model="form.code" clearable @keyup.enter = "showOrderDetail"/>
        </el-form-item>
      </el-form>
      <el-alert title="请将光标焦点放到文本框内，使用扫码枪扫码成功后会自动弹出订单详情。" type="error"
                 @click="focusToCodeInput"/>
    </el-dialog>
  </div>
</template>

<script setup>

const {proxy} = getCurrentInstance();
const openScan = ref(false);
const codeInputRef = ref(null);
const orderDetailDialogRef = ref(null);
const data = reactive({
  form: {
    code: ""
  },
  rules: {
    code: [{required: true, message: "", trigger: "blur"}]
  }
});
const {form, rules} = toRefs(data);

function handleScanDialogOpen() {
  focusToCodeInput()
}

function focusToCodeInput() {
  codeInputRef.value.focus();
  console.log("11111");
}

function toScan() {
  openScan.value = true;
}

function showOrderDetail() {
  if (form.value.code) {
    orderDetailDialogRef.value.showOrderDetailByCode(form.value.code);
  }
}

</script>

<style lang='scss' scoped>

</style>